<template>
  <div style="width: 100%;">
    <van-popup v-model="conditionShow" position="top" :style="{ height: '50%', width: '100%' }">
      <condform :alldata="conditionEle" @show-condition="searchCondition($event)" :clickmodel.sync="clickmodel"></condform>
    </van-popup>
    <van-popup v-model="listShow" position="top" :style="{ height: '50%', width: '100%' }">
      <div class="L-popup-list-cell" v-for="item in allSolutionIds" :key="item.value" @click="changeSelectSolution({ curid: item.value, ...item })">{{ item.label }}</div>
    </van-popup>
    <!-- <van-sticky>
      <div style="height: 50px; width:100%;margin-bottom: 5px;">
        <el-button type="primary" icon="el-icon-s-operation" @click="conditionShow = true" style="width:20%"></el-button>
        <condsolutions style="width:80%" @change-select="changeSelectSolution($event)" :alldata="allSolutionIds" :currentSolutionId="currentSolutionId"></condsolutions>
      </div>
    </van-sticky> -->
    <van-sticky>
      <van-row type="flex" align="center" class="L-top-bar">
        <van-col :span="4">
          <i class="el-icon-s-operation" style="font-size:18px" @click="conditionShow = true"></i>
          <!-- <el-button type="text" icon="el-icon-s-operation" @click="conditionShow = true" style="width:20%"></el-button> -->
        </van-col>
        <van-col :span="16">{{ currentTitle }}</van-col>
        <van-col :span="4">
          <i class="el-icon-arrow-down" style="font-size:18px" @click="listShow = true"></i>
        </van-col>
      </van-row>
    </van-sticky>
    <div class="el-scrollbar__wrap">
      <!-- <div class="el-scrollbar__wrap" v-bind:style="{ overflow: 'auto', height: itemHeight + 'px', width: '100%', backgroundColor: 'rgb(235, 235, 235)' }"> -->
      <!-- key加随机数目的是刷新子组件 -->
      <div v-for="(item, index) in alldata" :key="index + '' + Math.random()" :style="{ 'box-sizing': 'border-box', 'margin': '1vh 0.5vh 1vh 0.5vh', 'overflow': 'auto', 'background-color': 'white', 'border-radius': '6px', 'max-height': item.sname === 'chinamap' ? 'auto' : '350px', 'padding': item.sname === 'diamond' ? '0px' : '3px 5px 5px 5px' }">
        <!-- {{item.sname}} -->
        <bulletin v-if="item.sname === 'bulletin'" :alldata="item"></bulletin>
        <alert v-else-if="item.sname === 'alert'" :alldata="item"></alert>
        <todo v-else-if="item.sname === 'todo'" :alldata="item"></todo>
        <chinamap v-else-if="item.sname === 'chinamap'" :alldata="item" @query-data="changeSelectMap($event)" :hiscode="conditionObj.mapareaid"></chinamap>
        <diamond v-else-if="item.sname === 'diamond'" :alldata="item"></diamond>
        <piechart v-else-if="item.sname === 'piechart'" :alldata="item"></piechart>
        <linebarchart v-else-if="item.sname === 'linebarchart'" :alldata="item"></linebarchart>
        <ranking v-else-if="item.sname === 'ranking'" :alldata="item"></ranking>
        <!-- <htable v-else-if="item.sname === 'table'" :alldata="item"></htable> -->
        <rank-table v-else-if="item.sname === 'table'" :alldata="item"></rank-table>
        <report v-else-if="item.sname === 'report'" :alldata="item"></report>
        <rank v-else-if="item.sname === 'rank'" :alldata="item"></rank>
        <data-panel v-else-if="item.sname === 'complete'" :alldata="item" :index="index"></data-panel>
        <!-- <complete v-else-if="item.sname === 'complete'" :alldata="item" :index="index"></complete> -->
        <everymonth v-else-if="item.sname === 'everymonth'" :alldata="item" :index="index"></everymonth>
        <quicknavigation v-else-if="item.sname === 'quicknavigation'" :alldata="item" :index="index"></quicknavigation>
      </div>
    </div>
    <van-tabbar v-model="buttomactive" safe-area-inset-bottom>
      <van-tabbar-item icon="home-o" @click="menuChange('homepage')">主页</van-tabbar-item>
      <van-tabbar-item icon="label-o" @click="menuChange('flowlist')">审批</van-tabbar-item>
      <van-tabbar-item icon="qr" @click="menuChange('main')">功能</van-tabbar-item>
      <van-tabbar-item icon="chart-trending-o" @click="menuChange('report')">分析</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="menuChange('mine')">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import { TreeSelect, Grid, GridItem, Toast, Popup, Tabbar, TabbarItem, Swipe, SwipeItem, Col, Row, DropdownMenu, DropdownItem, NoticeBar, ActionSheet, Cell, CellGroup, Circle, Button, Tab, Tabs, Icon, Sticky, DatetimePicker } from 'vant'
import qs from 'qs'
import * as dd from 'dingtalk-jsapi'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import usehomepage from '@/utils/usehomepage'
// import dataPanel from '../components/homepage/dataPanel.vue'

Vue.use(Icon).use(Sticky).use(DatetimePicker).use(TreeSelect).use(usehomepage).use(Grid).use(GridItem).use(Toast).use(Popup).use(Tabbar).use(TabbarItem).use(Swipe).use(SwipeItem).use(Col).use(Row).use(DropdownMenu).use(DropdownItem).use(NoticeBar).use(ActionSheet).use(Cell).use(CellGroup).use(Circle).use(Button).use(Tabs).use(Tab)
export default {
  // components: { dataPanel },
  name: 'homepage',
  data () {
    return {
      listShow: false,
      currentTitle: '销售数据看版',
      itemHeight: document.documentElement.clientHeight,
      buttomactive: 0,
      listdata: [],
      alldata: [],
      conditionMap: {},
      conditionEle: [],
      conditionObj: {},
      conditionShow: false,
      allSolutionIds: [],
      currentSolutionId: null,
      currentSolutionLabel: null,
      homepagecurid: null,
      searchData: {},
      idsolution: null,
      clickmodel: null
    }
  },
  created: function () {
    //console.log('created......')
    let _this = this
    document.title = this.$route.query.stitle
    //console.log('document.title', document.title)
    if (dd.env.platform !== 'notInDingTalk') {
      dd.ready(function () {
        dd.biz.navigation.setTitle({
          title: _this.$route.query.stitle
        })
      })
    }
  },
  mounted: function () {
    this.itemHeight = this.itemHeight - 116
    this.queryData(this.searchData)
  },
  activated: function () {
    //console.log('clickmodel', this.clickmodel, this.$store.state.ref_id)
    if (this.clickmodel) {
      this.clickmodel.item.value = this.$store.state.ref_show
      this.clickmodel.ref.value = this.$store.state.ref_id
    }
    this.$store.commit('clearRef')
  },
  methods: {
    searchCondition (event) {
      //console.log('data', event)
      this.conditionShow = false
      event['idsolution'] = this.idsolution
      this.queryData(event)
    },
    changeSelectSolution (val) {
      //console.log('%%%', val)
      this.listShow = false
      this.homepagecurid = val.curid
      this.currentTitle = val.label
      this.searchData = {
        idsolution: val.curid
      }
      this.queryData(this.searchData)
    },
    changeSelectMap (data) {
      this.searchData = {
        idsolution: this.idsolution,
        mapareaid: data.code,
        mapareahis: data.name,
        maparea: data.name
      }
      this.queryData(this.searchData)
    },
    queryData (data) {
      // //console.log('queryData', data)
      this.idsolution = data['idsolution']
      this.axios({
        method: 'post',
        url: '/api/homepage.home.do',
        data: qs.stringify(data)
      }).then(res => {
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          this.alldata = res.data.maindata
          this.conditionMap = res.data.conditionMap
          this.transformNames(this.conditionMap)
          this.allSolutionIds = res.data.allSolutionIds
          this.currentSolutionId = res.data.currentSolutionId
          this.currentSolutionLabel = res.data.currentSolutionLabel
          document.title = res.data.currentSolutionLabel
          //console.log('document.title', document.title)
          if (dd.env.platform !== 'notInDingTalk') {
            dd.ready(function () {
              dd.biz.navigation.setTitle({
                title: res.data.currentSolutionLabel
              })
            })
          }
          //console.log('res', res)
        }
      }).catch(res => {
        this.reserror(res)
      })
    },
    queryCondition () {

    },
    menuChange (option) {
      if (option === 'flowlist') {
        this.$router.push({
          name: 'flowlist',
          query: { idobject: 'flowclmx', actiontype: 'mytask', actioncode: 'unhandle', stitle: 'flowclmx' }
        })
      } else if (option === 'report') {
        this.$router.push({ name: 'reportlist', query: { idobject: 'report', stitle: 'report' } })
      } else if (option === 'main') {
        this.$router.push({ name: 'main' })
      } else if (option === 'homepage') {
        this.$router.push({
          name: 'homepage',
          stitle: ''
        })
      } else if (option === 'mine') {
        this.$router.push({ name: 'mine' })
      }
    },
    transformNames (conditionMap) {
      this.conditionEle = []
      this.conditionObj = {}
      if (conditionMap === '' || conditionMap == null) return
      let text = ''
      let type = ''
      let data = ''
      Object.keys(conditionMap).forEach((key) => {
        data = conditionMap[key]
        let isEle = false // 排除隐藏搜索条件
        let refkey = ''
        if (key === '$query(startym)') {
          text = '开始年月'
          type = 'date'
          isEle = true
        } else if (key === '$query(endym)') {
          text = '结束年月'
          type = 'date'
          isEle = true
        } else if (key === '$query(yearmonth)') {
          text = '年月'
          type = 'date'
          isEle = true
        } else if (key === '$query(product)') {
          text = '产品'
          isEle = true
          type = 'ref'
          refkey = 'productid'
        } else if (key === '$query(productid)') {
          text = '产品id'
          isEle = false
        } else if (key === '$query(dep)') {
          text = '部门'
          isEle = true
          type = 'ref'
          refkey = 'depid'
        } else if (key === '$query(depid)') {
          text = '部门id'
          isEle = false
        } else if (key === '$query(startdate)') {
          text = '开始日期'
          type = 'date'
          isEle = true
        } else if (key === '$query(enddate)') {
          text = '结束日期'
          type = 'date'
          isEle = true
        } else if (key === '$query(account)') {
          text = '客户'
          isEle = true
          type = 'ref'
          refkey = 'accountid'
        } else if (key === '$query(accountid)') {
          text = '客户id'
          isEle = false
        } else if (key === '$query(idowner)') {
          text = '业务员'
          isEle = true
          type = 'ref'
          refkey = 'idownerid'
          key = '$query(employee)'
        } else if (key === '$query(idownerid)') {
          text = '业务员id'
          isEle = false
        } else if (key === '$query(sheng)') {
          text = '省份'
          isEle = true
          type = 'ref'
          refkey = 'shengid'
        } else if (key === '$query(shengid)') {
          text = '省份id'
          isEle = false
        }
        if (key.indexOf('$query') > -1) {
          this.conditionObj[key.substring(7).substring(0, key.substring(7).length - 1)] = data
        }

        // if (data !== '' && data !== null && data !== undefined) {
        if (key === '$query(account)') {
          this.conditionEle.push({ 'title': text, 'data': conditionMap[key], 'type': type, viewid: conditionMap['$query(account)_viewid'], id: conditionMap['$query(account)_objname'], isShow: isEle, refkey: refkey })
        } else if (key === '$query(idowner)') {
          this.conditionEle.push({ 'title': text, 'data': conditionMap[key], 'type': type, viewid: conditionMap['$query(idowner)_viewid'], id: conditionMap['$query(idowner)_objname'], isShow: isEle, refkey: refkey })
        } else if (key === '$query(product)') {
          this.conditionEle.push({ 'title': text, 'data': conditionMap[key], 'type': type, viewid: conditionMap['$query(product)_viewid'], id: conditionMap['$query(product)_objname'], isShow: isEle, refkey: refkey })
        } else if (key === '$query(dep)') {
          this.conditionEle.push({ 'title': text, 'data': conditionMap[key], 'type': type, viewid: conditionMap['$query(dep)_viewid'], id: conditionMap['$query(dep)_objname'], isShow: isEle, refkey: refkey })
        } else if (key === '$query(sheng)') {
          this.conditionEle.push({ 'title': text, 'data': conditionMap[key], 'type': type, viewid: conditionMap['$query(sheng)_viewid'], id: conditionMap['$query(sheng)_objname'], isShow: isEle, refkey: refkey })
        } else {
          this.conditionEle.push({ 'title': text, 'data': conditionMap[key], 'type': type, id: key.substring(7).substring(0, key.substring(7).length - 1), isShow: isEle, refkey: refkey })
        }
        // }
      })
      // //console.log('type:' + type, 'conditionObj', this.conditionObj)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.L-popup-list-cell {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  // margin-top: 10px;
}

.L-popup-list-cell:hover {
  background: #eff4fa;

}

.itemcol {
  height: 9vh;
  text-align: center;
}

.showarea {
  border: 5px solid rgb(245, 249, 249);
}
</style>
